<script setup lang="ts">
import { defineProps, reactive, ref, withDefaults } from "vue";
import API from "@/api";
import { aiGenerateQuestionUsingPost } from "@/api/questionController";
import message from "@arco-design/web-vue/es/message";

//接收路由的参数
interface Props {
  appId: string;
  aiOnSuccess?: (result: API.QuestionContentDTO[]) => void;
  aiOnSSESuccess?: (result: API.QuestionContentDTO) => void;
  aiOnSSEStart?: (event: any) => void;
  aiOnSSEClose?: (event: any) => void;
}

const props = withDefaults(defineProps<Props>(), {
  appId: () => {
    return "";
  },
});

const visible = ref(false);
const form = reactive({
  questionsNum: 5,
  optionsNum: 4,
} as API.AiGenerateQuestionRequest);
const submitting = ref(false);
const handleClick = () => {
  visible.value = true;
};
const handleOk = () => {
  visible.value = false;
};
const handleCancel = () => {
  visible.value = false;
};
const handleSubmit = async () => {
  if (!props.appId) {
    return;
  }
  submitting.value = true;
  const res = await aiGenerateQuestionUsingPost({
    appId: props.appId as any,
    ...form,
  });
  if (res.data.code === 0 && res.data.data) {
    if (props.aiOnSuccess) {
      props.aiOnSuccess(res.data.data);
    }
    visible.value = false;
  } else {
    message.error("生成题目失败");
  }
  submitting.value = false;
};

const doSubmitSSE = async () => {
  if (!props.appId) {
    return;
  }
  submitting.value = true;
  //创建SSE请求
  const eventRouce = new EventSource(
    //填写后端的完整的地址
    `http://localhost:8100/api/question/ai_generate/sse?appId=${props.appId}&optionsNum=${form.optionsNum}&questionsNum=${form.questionsNum}`
  );
  eventRouce.onmessage = function (event) {
    console.log(event.data);
    props.aiOnSSESuccess?.(JSON.parse(event.data));
  };
  eventRouce.onopen = function () {
    console.log("建立连接");
    props.aiOnSSEStart?.(event);
  };
  eventRouce.onerror = function () {
    if (event?.eventPhase == EventSource.CLOSED) {
      props.aiOnSSEClose?.(event);
      console.log("正常关闭");
      eventRouce.close();
    }
  };
  submitting.value = false;
};
</script>

<template>
  <a-button type="primary" @click="handleClick">Ai 生成题目</a-button>
  <a-drawer
    :width="340"
    :height="340"
    :visible="visible"
    :placement="'left'"
    @ok="handleOk"
    @cancel="handleCancel"
    unmountOnClose
  >
    <template #title> Ai 生成题目</template>
    <div>
      <a-form
        :model="form"
        label-align="left"
        auto-label-width
        @submit="handleSubmit"
      >
        <a-form-item
          field="userAccount"
          tooltip="请输入你要生成的题目数量"
          label="题目数量"
        >
          <a-input-number
            min="0"
            max="15"
            v-model="form.questionsNum"
            placeholder="请输入你要生成的题目数量"
          />
        </a-form-item>
        <a-form-item field="optionsNum" label="选项数量">
          <a-input-number
            min="0"
            max="5"
            v-model="form.optionsNum"
            placeholder="请输入你要生成的题目选项"
          />
        </a-form-item>
        <a-form-item>
          <div
            style="
              display: flex;
              width: 100%;
              align-items: center;
              justify-content: space-between;
            "
          >
            <a-space>
              <a-button
                :loading="submitting"
                type="primary"
                html-type="submit"
                style="width: 120px"
              >
                一键生成
              </a-button>
              <a-button
                :loading="submitting"
                type="primary"
                @click="doSubmitSSE"
                style="width: 120px"
              >
                实时生成
              </a-button>
            </a-space>
          </div>
        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
</template>

<style scoped></style>
